<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>好书生</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/docs.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/bigautocomplete.css" rel="stylesheet">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="img/favicon.png">

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/scripts.js"></script>
    <script type="text/javascript" src="js/jquery.bigautocomplete.js"></script>
    <script type="text/javascript" src="js/underscore-min.js"></script>
</head>

<body>
<div class="container" >
    <div class="row clearfix">
        <div class="col-md-12 column">
            <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li > <a ><span cmd='login'>登陆</span>&nbsp;|&nbsp;<span cmd='register'>注册</span></a></li>
                        <li><a  href="#" style="font-size: 20px;color:rgb(204, 13, 36);">穷则独善其身，达则兼济天下！</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a  cmd href="index.html">首页</a></li>
                        <li><a cmd href="#">活动专区</a></li>
                        <li><a cmd href="http://www.baidu.com">公益项目</a></li>
                        <li><a cmd href="#">志愿者中心</a></li>
                        <li><a cmd href="#">关于我们</a></li>
                    </ul>
                </div>
            </nav>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row clearfix">
                        <div class="col-md-10 column">
                            <div style="position:relative;padding-left:20px;">
                                <div style="float:left;"><h1>好书生</h1></div>
                                <div style="float:left;padding-top: 10px;padding-left: 20px;"><h3>兼职实习信息网</h3></div>
                                <div style="position: relative;top: 30px;left: 80px;">
                                    <div class="btn-group" >
                                        <button type="button" class="btn btn-danger"  style="width: 60px;text-align: left;">全部</button>
                                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu" style="min-width: 88px;">
                                            <li><a href="#">兼 职</a></li>
                                            <li><a href="#">实 习</a></li>
                                        </ul>
                                    </div>
                                    <input type="text" id="commonSearch" style="width:300px;height:34px; line-height:30px;font-size:15px; border:2px #CCCCCC solid;" />
                                    <button type="button" class="btn btn-default" style="width:60px;background: #d2322d;color: white;">搜索</button>

                                </div>
                            </div>

                        </div>
                        <div class="col-md-2 column">
                            <div class="top-nav">

                                <button type="button" class="btn btn-default" style="width:130px;background: #d2322d;color: white;">我要发布</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">

                    <div class="row clearfix">
                        <div class="col-md-9 column">
                            <div id="infoList" class="list-group" style="height: 670px;">

                            </div>
                            <ul class="pagination">
                                <li><a href="#">上一页</a></li>
                                <li><a href="#">1</a> </li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a> </li>
                                <li><a href="#">4</a> </li>
                                <li><a href="#">5</a> </li>
                                <li> <a href="#">下一页</a> </li>
                            </ul>
                        </div>
                        <div class="col-md-3 column">
                            <div class="form-group">
                                <div class=" col-sm-12" style="background:#B1E4E2;;height:300px;border-radius: 4px;font-size: 12px;">
                                    <div style="color: rgb(255, 0, 51);font-size: 14px;margin-bottom: 5px;margin-left: 5px;">最新资讯</div>
                                    <table class="news">
                                        <tr><td><img  src="img/rightarrow2.png" >大学城乐购超市迎来2周年有奖活动！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >大学城同城KTV下周一正式营业！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >下周一工程技术大学元旦晚会！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >大学城同城KTV下周一正式营业！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >大学城同城KTV下周一正式营业！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >大学城同城KTV下周一正式营业！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >大学城同城KTV下周一正式营业！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >大学城同城KTV下周一正式营业！</td></tr>
                                        <tr><td><img  src="img/rightarrow2.png" >大学城同城KTV下周一正式营业！</td></tr>
                                    </table>
                                </div>
                                <div class=" col-sm-12" style="background:#B1E4E2;;height:395px;margin-top: 4px;border-radius: 4px;">
                                    <div>手机关注更多即时信息</div>
                                    <div>请关注好书生微信公众号: haoshusheng</div>
                                    <img src="img/weixin.jpg" width="200" height="200">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div style="position: relative;width: 100%;height: 100px;background: rgb(115, 221, 217);border-top: 2px solid blue;">
    <div style="width: 300px;margin: auto;"> 德立信息工作室 版权所有</div>

</div>
<script type="text/javascript">
    $(function(){
        $("#commonSearch").bigAutocomplete({width:300,data:[{title:"a中国好声音",result:{ff:"qq"}},{title:"中国移动网上营业厅"},{title:"中国银行"},{title:"中国移动"},{title:"中国好声音第三期"},{title:"中国好声音 第一期"},{title:"中国电信网上营业厅"},{title:"中国工商银行"},{title:"中国好声音第二期"},{title:"中国地图"}],callback:function(data){
            alert(data.title);

        }});

        $('a[cmd]').hover(function(){
            $(this).css({'background':'#d2322d','color':'white'});
        },function(){
            $(this).css({'background':'transparent','color':'#777777'});
        });
        $('a span[cmd]').hover(function(){
            $(this).css({'background':'#d2322d','color':'white','cursor':'pointer'});
        },function(){
            $(this).css({'background':'transparent','color':'#777777'});
        });
        $('a span[cmd]').bind('click',function(){
            var cmd= $(this).attr('cmd');
            if('login'==cmd){
                alert('登录');

            }else if('register'==cmd){
                alert('注册');
            }
        });
        showLoading();
        $.get("data/infoList.json", function(resp){
            var data = $.parseJSON(resp);
            //console.info('data>>>',data);
            var infoHtml= "";
            _.each(data.list,function(item){
                infoHtml+=  '<div class="list-group-item"><img  src="img/work02.jpg" ><lable style="color:red;">『</lable>' +
                        '<a href="#" style="text-decoration: none;color:rgb(105, 15, 15);">'+item.company+'</a>' +
                        '<lable style="color:red;">』</lable><a href="'+item.url+'" style="color:#093052">'+item.title+
                        '</a><span class="time">'+item.pubTime+'</span>';
                if(item.rmd=='yes')
                    infoHtml+=  '<span class="tuijian">推荐</span>';
                infoHtml+=' </div>';
            });
           $('#infoList').html(infoHtml);
        });

        function showLoading(){
            $('#infoList').html(' <img style="margin-top: 100px;margin-left: 200px;" src="img/loader.gif">');
        }
    });
</script>
</body>
</html>
